<template>
    <div id="communtiy" :style="`height:${divHeight}`">
        <div class="title_head">
            <span class="title">宠物社区</span>
            <span>
            <van-button icon="photograph" type="primary" plain  @click="openAddPanel"/>
            </span>
        </div>
        <van-divider class="line" />
    <div class="dataList" :style="`height:${bodyHeight}`">
        <div class="list_body" v-for="(data,index) in dataList" :key="index">
            <div class="image_head">
                <van-image
                    round
                    width="60"
                    height="60"
                    src="https://img.yzcdn.cn/vant/cat.jpeg"
                />
            </div>
            <div class="list_content">
                <div class="nick_date">
                <span>海绵宝宝</span>
                <span style="color: rgb(137, 126, 126);margin-top: 1rem;">20120-3-19</span>
                </div>
                <p style="font-size:13px">白白长着一身洁白的毛儿，当它蹲立不动时，远望就像一大块白石头。那双又黑又亮的大眼睛，配着小小的鼻子和嘴巴，多么可爱的小狗狗哇！四只短却很壮的小腿，跑起来总是那么快。那条小尾巴总是不停地摇着，好像永远也不知道疲倦似的。 </p>
                <div class="img_list">
                 <van-grid border="true" :column-num="3">
                    <van-grid-item @click="BigImg">
                        <van-image src="https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2038406380,317017081&fm=5"  />
                    </van-grid-item>
                    <van-grid-item>
                        <van-image src="https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=416160078,4249346239&fm=5" />
                    </van-grid-item>
                    <van-grid-item>
                        <van-image src="https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2152435263,329091142&fm=5" />
                    </van-grid-item>
                    <van-grid-item>
                        <van-image src="https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=598069525,3705173246&fm=5" />
                    </van-grid-item>
                    <van-grid-item>
                        <van-image src="https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1067412999,107277101&fm=5" />
                    </van-grid-item>
                    <van-grid-item>
                        <van-image src="https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2300875363,445064071&fm=5" />
                    </van-grid-item>
                </van-grid>
                </div>
                <div class="button_list">
                    <van-button  icon="chat-o" type="primary" size="mini" @click="openPLPanel">12</van-button>
                    <van-button icon="good-job-o" type="primary" size="mini" @click="liked">{{Cucount}}</van-button>
                </div>
            </div>
        </div>
    </div>
    <van-image-preview
        v-model="show"
        :images="images"
        >
    </van-image-preview>
    </div>
</template>
<script>

export default {
    data(){
        return{
            divHeight:'',
            bodyHeight:'',
            dataList:[1,2,3,4,45],//整体数组
            Cucount:1,
            images:['https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2300875363,445064071&fm=5'],///图片预览数组
            show:false,
            
        }
    },
    methods:{
        getHeight(){
            this.divHeight=window.innerHeight+"px";
            this.bodyHeight=window.innerHeight-80+"px"
        },
        liked(){
            this.Cucount++;
        },
        BigImg(){
            this.show=true
        },
        openPLPanel(){
            this.$router.push({name:'communtiyInfo'})
        },
        openAddPanel(){
            this.$router.push({name:'addCommuntiy'})
        }
    },
    created(){
        this.getHeight()
    }
}
</script>

<style scoped>
    #communtiy{
        background: white;
    }
    .title{
        font-size: 18px;
        margin-left: 2rem;
        line-height: 2rem;
    }
    .list_body{
        display: flex;
        margin-top: 2rem;
    }
    .image_head{
        margin-left: .3rem;
    }
    .list_content{
        margin-left: .6rem;
        margin-right: .6rem;
    }
    .dataList{
        overflow-y: scroll;
        width: 100%;
    }
    .nick_date{
        display: flex;
        justify-content: space-between;
        margin-right: .2rem;
    }
    .title_head{
        display: flex;
        justify-content: space-between;
        margin-right: .4rem;    
    }
</style>